<template>
	<view class="cd-goods-list">
		<view class="cd-goods-item" v-for="item in goodsList" :key="item.id" @tap="details(item.id)">
			<image class="cd-goods-item-img" :src="item.list_pic_url" mode="scaleToFill" />
			<view class="cd-goods-item-name">{{ item.name }}</view>
			<view class="cd-goods-item-price">{{ item.retail_price | priceFormat }}123123</view>
		</view>
	</view>
</template>

<script>
	import {
		ApiGetGoodsDetail
	} from '../../utils/api.js'
	export default {
		name: 'cd-goods-list',
		props: {
			goodsList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {};
		},
		methods: {
			details(id) {
				console.log("准备跳去详情......");
				// let res = await ApiGetGoodsDetail(id);
				// console.log('这是商品详情的数据', res);
				uni.navigateTo({
					url: `/pages/index/goodsDetail?id=${id}`
				})
			}
		}
	};
</script>

<style lang="scss">
	.cd-goods-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		// grid-template-rows: 480rpx 480rpx;
		grid-auto-rows: 480rpx;
		gap: 15rpx;

		.cd-goods-item {
			overflow: hidden;

			// background-color: skyblue;
			.cd-goods-item-img {
				width: 372rpx;
				height: 372rpx;
			}

			.cd-goods-item-name {
				font-size: 28rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				text-align: center;
				overflow: hidden;
				height: 22px;
				width: 70%;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				margin: 0px auto;
				// background: red;
			}

			.cd-goods-item-price {
				margin-top: 14rpx;
				font-size: 26rpx;
				color: var(--price-color);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
